<template>
    <div class="myChart chart-top">
        <span
            style="color:white;font-size: 14px;font-weight: bold;font-style: italic;letter-spacing: 2px;margin-left: 10%;">设备运转比率</span>
        <img src="../../assets/images/divide.png" alt="" style="width: 100%;">
        <div style="position: relative;height: max-content;">
            <img id="img" src="../../assets/images/rate-border.png" alt=""
                style="margin-left: 11.5%;vertical-align: middle;width: 35%;">
            <dv-charts id="chart" :option="option" style="width: 58%;height: 110%;position: absolute;top: 0%;left: 0%;" />
            <div style="display: inline-block;margin-left: 10%;">
                <div>
                    <span
                        style="display: inline-block;width: 10px;height: 10px;border-radius: 5px;background-color: #32c5e9;"></span>
                    <span style="color: #fff;letter-spacing: 2px;"> 在线设备数 {{ onLineCount }}</span>
                </div>
                <span
                    style="display: inline-block;width: 10px;height: 10px;border-radius: 5px;background-color: #37a2da;"></span>
                <span style="color: #fff;letter-spacing: 2px;"> 离线设备数 {{ offLineCount }}</span>
            </div>
        </div>
        <img src="../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
    </div>
</template>

<script>
import { runningCount } from '../../api/oil/statistic';
export default {
    name: 'DeviceRunningRate',
    data() {
        return {
            option:{},
            optionConfig: {
                title: {
                    text: ''
                },
                series: [
                    {
                        type: 'pie',
                        // data: [
                        //     { name: '离线机数', value: 2 },
                        //     { name: '在线机数', value: 8 },
                        // ],
                        radius: ['40%', '60%'],
                        insideLabel: {
                            show: true,
                        },
                        outsideLabel: {
                            show: true,
                            labelLineEndLength: 30,
                            style: {
                            }
                        },
                    }
                ]
            },
            onLineCount: 0,
            offLineCount: 0
        };
    },
    created() {
        this.getData();
        window.addEventListener('resize', this.resize);
    },
    methods: {
        getData() {
            runningCount().then(res => {
                var data = res.data;
                console.log(data);
                for (var i = 0; i < data.length; i++) {
                    data[i].name = data[i].on_line == 1 ? '在线' : '离线';
                    if(data[i].on_line == 1){
                        this.onLineCount = data[i].count;
                    }else{
                        this.offLineCount = data[i].count;
                    }
                    data[i].value = data[i].count;
                }
                this.optionConfig.series[0].data = data;
                this.option = this.optionConfig;
            });
        },
        resize() {
            var img = document.getElementById('img');
            var chart = document.getElementById('chart');
            chart.style.height = img.width + 'px';
        }
    },
    mounted() {
        this.resize();
        // Add your mounted logic here
    }
};
</script>

<style>
.chart-top .dv-scroll-board .header {
    background: transparent;
}
</style>